<template>
    <div>
        <div id="mouse-position"></div>
    </div>
</template>

<script setup>
import { inject, onMounted } from 'vue';

onMounted(() => {
    let map = inject('$map')
    // 地图控件
    // 1. 导航控件
    const navControl = new ol.control.ZoomToExtent({
        extent: [
            100, 30,
            140, 30
        ]
    })
    map.addControl(navControl)

    // 2.放大缩小控件
    const zoomslider = new ol.control.ZoomSlider()
    map.addControl(zoomslider)

    // 3.鼠标位置控件
    const mousePositionControl = new ol.control.MousePosition({
        // 坐标格式
        coordinateFormat: ol.coordinate.createStringXY(4),
        projection: "EPSG:4326",
        // 坐标信息显示样式类名,默认是'ol-mouse-position'
        className: 'custom-mouse-position',
        target: document.querySelector('#mouse-position'),
        undefinedHTML: "&nbsp"
    })
    map.addControl(mousePositionControl)

    // 4. 比例尺控件
    const scaleLineControl = new ol.control.ScaleLine({
        // 设置比例尺单位
        units: 'metric'
    })
    map.addControl(scaleLineControl)

    // // 5. 鹰眼控件
    const overviewMapControl = new ol.control.OverviewMap({
        // 鹰眼控件样式
        className: 'ol-overviewmap ol-custom-overviewmap',
        layers: [gaode_vector, gaode_image],
        // 鹰眼控件展开时功能按钮上的标识
        collapseLabel: '\u00BB',
        // 鹰眼控件折叠时功能按钮上的标识
        label: '\u00AB',
        // 初始为展开显示方式
        collapsed: false,
        view: new ol.View({
            projection: "EPSG:4326",
            minZoom: 8,
            maxZoom: 18
        })
    })
    map.addControl(overviewMapControl)

    // 6. 全屏控件
    const fullScreen = new ol.control.FullScreen()
    map.addControl(fullScreen)

    // console.log(overviewMapControl)
    // console.log(overviewMapControl.getMap())
    // console.log(overviewMapControl.getMap().getLayers().array_)
    let isToggle = false
    $('.ol-overviewmap .ol-overviewmap-map').click(function () {
        isToggle = !isToggle
        if (isToggle) {
            // 切到影影像图层

            // 矢量图层透明度改为0 隐藏
            gaode_vector.setOpacity(0)
        } else {
            gaode_vector.setOpacity(1)
        }
    })
})

</script>

<style lang="scss">
// 放大缩小按钮
.ol-zoom {
    position: absolute;
    left: 20%;
    top: 0%;
}

// 导航定位
.ol-zoom-extent {
    position: absolute;
    left: 20%;
    top: 10%;
}

// 拉条放大缩小
.ol-zoomslider {
    position: absolute;
    left: 20%;
    top: 20%;
    z-index: 20000;
    background: red;
    /* 设置一个较高的 z-index 值 */
}

// 鼠标位置
#mouse-position {
    position: absolute;
    z-index: 19999;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
    width: 200px;
    height: 50px;
    background: #3333336f;
    text-align: center;
    line-height: 50px;
}

// 比例尺
.ol-scale-line {
    position: absolute;
    left: 300px;
    bottom: 20%;
}

// 鹰眼
.ol-overviewmap .ol-overviewmap-map {
    position: absolute;
    left: 450px;
    bottom: 20%;
}

// 鹰眼关闭按钮
.ol-overviewmap:not(.ol-collapsed) button {
    position: absolute;
    left: 450px;
    bottom: 20%;
}

// 鹰眼展开按钮
.ol-overviewmap button {
    position: absolute;
    left: 450px;
    bottom: 20%;
}

// 全屏
.ol-full-screen {
    position: absolute;
    right: 400px;
    top: 20%;
}
</style>
